<template>
   <div id="product">
   <div class="productContainer">
     <el-row :gutter="20">
        <el-col :lg="{span: 12, offset: 0}" :md="{span: 12, offset: 0}" :sm="{span: 24, offset: 0} " :xs="{span: 24, offset: 0} ">
         <!--  <img src="../assets/product/chair-1.jpg"> -->
          <img :src="productItem.miao">
        </el-col>

        <el-col :lg="{span: 12, offset: 0}" :md="{span: 12, offset: 0}" :sm="{span: 24, offset: 0}" :xs="{span: 24, offset: 0} ">
        <section>
                    <!--<div>{{products}}</div>-->
                    <h4 >{{productItem.name}}</h4>
                    <div class="details-money">{{productItem.price}}</div>
                </section>

                <section class="product-introduction">
                    <label>产品介绍</label>
                    <p>浪漫的情怀。舒适地坐在伴侣身边，或者躺在豪华和精致的沙发上。如果你正在寻找一个正式与休闲的外观之间的平衡，这一款，刚刚好。</p>
                </section>

                <section>
                    <label>产品参数</label>
                    <div class="drtails-number">设计师：<span>{{productItem.author}}</span></div>
                    <div class="drtails-number">SKU：<span> W65-107921</span></div>
                    <div class="drtails-size">尺寸：<span>1257 x 813 x 800 mm</span></div>
                    <div class="drtails-material">材质：<span>栗子木，实木，织物</span></div>
                    <div class="drtails-finish">Finish：<span>Water-based polyurethane finish</span></div>
                    <div class="drtails-brand">品牌：<span>WILLO</span></div>
                    <div class="drtails-brand">发布日期：<span>{{productItem.pubTime}}</span></div>
                </section>

                <section class="features">
                    <label>Features</label>
                    <div class="section-body">
                        <ol>
                            <li>Durable spot clean fabric</li>
                            <li>Seat padded with high-density foam</li>
                            <li>High-density foam cushion(s) for lasting comfort</li>
                        </ol>
                    </div>
                </section>

                <section class="numberContainer">
                    <label>数量</label>

                        <input class="input-number" placeholder="buyNum" v-model="buyNum">
                        <i class="el-icon-arrow-up" @click="changeBuyNum(1)"></i>
                        <i class="el-icon-arrow-down" @click="changeBuyNum(0)"></i>


                </section>

                <section>

                    <div >
                    <el-button type="danger"  @click="open">加入购物车</el-button>
                    <el-button type="danger">立即购买</el-button>

                    </div>

                </section>
        </el-col>
     </el-row>
   </div>
   </div>
</template>


<script>
export default{
    name: 'product',
  data () {
    return {
      routeProductId:this.$route.query.productId,
      productData: [],
      productItem: [],
      buyNum: 1,
    }
  },
  computed: {
    
  },
  mounted (){
   this.getProductItemData();
  
  },
  methods: {
    getProductItemData: function(){
        this.$http.get('static/data/productList.json').then((response) => {
                   this.productData= response.body;
                   console.log(this.productData.length);
                   for(let i =0;i<this.productData.length;i++){
                      if (this.productData[i].productId == this.routeProductId) {
                        this.productItem = this.productData[this.routeProductId];
                        
                    }
                   }
                })
                .catch(function(response) {
                    console.log(response)
                })
    },
    open() {
        this.$message({
          message: '恭喜你，加入购物车成功！',
          type: 'success',
        });
      },
    changeBuyNum(a) {
       if(a==1){
         this.buyNum++;
        }else if(a==0){
          if(this.buyNum==1){
            this.buyNum = 1;
          }else{
          this.buyNum--;  
          }
          
        }
        
    }
  }
}
</script>

<style type="text/css">
.el-message{
  bottom: 100px;
      top: auto;
}
  #product h4, #product p{
    margin:0 ;
    margin-bottom: 5px;
  }
  #product img{
    width: 100%
  }
  #product section{
    border-bottom: 1px solid #eee;
    text-align: left;
    color: #000;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  #product section:last-child{
    border:none;text-align:center
  }
  #product p,.drtails-number,.drtails-size,.drtails-material,.drtails-finish,.drtails-brand{
    font-size: .85rem;
    line-height: 1.35rem;
  }

  .details-money {
    font-size: 16px;
    color: #ff4400;
    padding-bottom: 5px;
}
.features .section-body ol {
    counter-reset: li;
    font-size: .85rem;
    padding-left: 0;
}
.features .section-body li {
    position: relative;
    padding-left: 25px;
    line-height: 20px;
    display: block;
}
.section-body li:before {
    background-color: #cf7600;
    border-radius: 15px;
    color: #fff;
    content: counter(li);
    counter-increment: li;
    font-size: 11px;
    height: 15px;
    left: 0px;
    top: 3px;
    line-height: 15px;
    position: absolute;
    text-align: center;
    width: 15px;
}
.input-number {
    height: 37px;
    margin-left: 15px;
    width: 40px;
    padding: 2px;
        border: 1px solid #ccc;
}
.numberContainer {
    position: relative;
}
.numberContainer i{
  border: 1px solid #ccc;
    padding: 0px 3px 2px 3px;
    cursor: pointer;
    color: #666;
    text-align: center;
    height: 16px;
    line-height: 20px;
     left: 105px;
     position: absolute;
     font-size: 14px;
}
.el-icon-arrow-up{
    top: 0px;
}
.el-icon-arrow-down{  
  top: 23px;
}
  @media (min-width: 1200px){
    .productContainer{
      width: 1200px;
      margin:0 auto; 
    }

    
  }

  @media (min-width: 992px) and (max-width: 1199px){
 .productContainer{
      width: 992px;
      margin: 0 auto;
    }
   
  }

    @media (min-width: 768px) and (max-width: 991px){
  #product img {
    margin-bottom: 20px;
}
.productContainer{
      padding: 0 20px;
    }
   
  }

@media (max-width: 767px){

 #product img {
    margin-bottom: 20px;
}  
.productContainer{
      padding: 0 8px;
    }


}

</style>